I don't have any JSON files in this program only js and html my theory is that the program is running the html like a JSON file I'm using replit and kaboom to run the game
HTML code:
<!DOCTYPE html>
<html>
<head>
<title>kaboom</title>
<meta charset="utf-8">
<style>
* {
margin: 0;
}
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}
canvas {
display: block;
}
</style>
</head>
<body>
{{kaboom}}
</body>
</html>
js code:
import kaboom from "kaboom";
// initialize context
kaboom();
scene();
const SPEED = 320
var METEORX = 2
const NiceX = 20
//onsole.log(str(METEORX))
// load assets
loadSprite("grass", "sprites/grass.png");
loadSprite("Player", "sprites/Player.png");
loadPedit("meteor", "sprites/meteor.pedit");
loadPedit("air Meteor", "sprites/air Meteor.pedit");
// add a character to screen
const meteor = add ([
sprite("air Meteor"),
pos(rand(0, width()), 40),
area(),
move(DOWN, 300),
"meteor",
"enemy",
cleanup(20)
])
var player = add([
// list of components
"player",
sprite("Player"),
pos(center()),
area(),
body(),
health(3)
]);
add([
rect(width(), 48),
"ground",
pos(0, height() - 48),
outline(4),
area(),
solid(),
color(127, 200, 255),
])
onCollide("player", "enemy", () => {
player.hurt(1.5)
})
loadPedit("ground meteor", "sprites/ground meteor.pedit");
var difficulty = 5;
onCollide("enemy", (niceMeteor) => {
addExplosion()
destroy(niceMeteor)
})
onKeyPress("space", () => {
if (player.grounded()) {
player.jump()
}
})
onKeyDown("d", () => {
player.move(SPEED, 0)
})
onKeyDown("a", () => {
player.move(-SPEED, 0)
})
The most likely scenario is that one of the sprites you have specified does not exist. In this case you should also see an error: ERROR: sprite not found: "<your sprite name here>". (I think it's a bug that kaboom tries to parse the response as JSON at all in this case, because it's getting a 404 response with content-type text/html).
Another possibility, however improbable, is that one of your sprite files is corrupt. Kaboom's .pedit file format is actually a JSON file with image data embedded as base64:
{
"version": "1",
"width": 32,
"height": 32,
"palette": [[0,0,0,255],[255,255,255,255],[255,255,128,255],[255,128,255,255],[0,128,128,255],[128,0,255,255],[255,0,128,255],[0,255,255,255]],
"anims": {
"Test": {"from":0,"to":1,"loop":true}
},
"frames":[
"data:image/png;base64,...",
"data:image/png;base64,..."
]
}
So if one of those files got corrupted during editing that could also cause this error. Normally in order to figure this out I would suggest you look at the stack trace for the error that is being thrown, which is visible in your web browser's developer console. However, Kaboom does not produce good stack traces for calls to loadPedit. So your best bet is probably to put some console.log('loading sprite XXX') statements before each load call. Once you know which pedit file is invalid you can rename that file from whatever.pedit to whatever.json and inspect the contents in your repl.